<script setup lang="ts">
import { getParkingAreaListAPI } from '@/apis/car';
import type { CarArea } from '@/types/car';
import type { PageParams } from '@/types/common';
import { onMounted, ref } from 'vue';

const pageParams = ref<PageParams>({
  page: 1,
  pageSize: 10
}) 
const total = ref(0)

const carAreaList = ref<CarArea[]>()
const getParkingAreaList = async () => {
  const res = await getParkingAreaListAPI(pageParams.value)
  console.log('res',res)
  carAreaList.value = res.data.rows
  total.value = res.data.total
}
onMounted(() => {
  getParkingAreaList()
})

</script>

<template>
  <div class="car-area-page">
    <el-card>
      <!-- 添加区域 -->
       <el-button type="primary" @click="">添加区域</el-button>
       <el-table :data="carAreaList">
          <!-- 序号 -->
          <el-table-column type="index" label="序号"></el-table-column>
         <el-table-column prop="areaName" label="区域名称"></el-table-column>
         <el-table-column prop="spaceNumber" label="车位数（个）"></el-table-column>
         <el-table-column prop="areaProportion" label="面积（m²）"></el-table-column>
        
          <el-table-column prop="ruleName" label="计费规则">
            <template #default="{ row }">
              <!-- 鼠标移入显示完整内容 -->
              <el-tooltip
                effect="dark"
                :content="row.hoverRuleName"
                placement="top"
              >
              {{ row.ruleName }}
              </el-tooltip>
            </template>
          </el-table-column>
         <el-table-column prop="remark" label="备注"></el-table-column>
         <el-table-column prop="name" label="操作">
           <template #default="scope">
             <el-button type="primary" link size="small" @click="">编辑</el-button>
             <el-button type="danger" link size="small" @click="">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="pagination">
        <el-pagination
          v-model:page-size="pageParams.pageSize"
          v-model:current-page="pageParams.page"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @change="getParkingAreaList"
       />
       </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.pagination{
  display: flex;
  justify-content: flex-end;
}
</style>
